<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="${ctxPath}/js/jquery-1.9.1.min.js"></script>
    <script src="${ctxPath}/js/DatePicker_ui_jquery.ui.core.js"></script>
    <script src="${ctxPath}/js/DatePicker_ui_jquery.ui.datepicker.js"></script>
    <script src="${ctxPath}/js/DatePicker_ui_jquery.ui.widget.js"></script>
    <script src="${ctxPath}/js/jquery.ui.datepicker.js"></script>
    <script src="${ctxPath}/js/select2.js"></script>
    <script type="text/javascript">
        var objectAirport = {};
        $(document).ready(function (e) {

            $.ajax({
                url: 'https://www.vietjetair.com/AirportList.aspx?lang=zh-CN',
                type: 'GET',
                dataType: 'json',
                success: function (json) {
                    objectAirport = json;
                    json = json.AirportList;
                    $.each(json, function (index) {
                        var optgroup = $('<optgroup>');
                        optgroup.attr('label', json[index].CountryName);
                        $.each(json[index].List, function (i) {
                            var option = $("<option></option>");
                            option.val(json[index].List[i].Code);
                            option.text(json[index].List[i].Name + " (" + json[index].List[i].Code + ")");

                            optgroup.append(option);
                        });
                        $("#selectOrigin").append(optgroup);
                    });
                    $('#selectOrigin').val('');
                    $("#selectOrigin").select2();
                }
            });
        });
        function ValidData() {
            if (document.getElementById("ctl00_UcRightV31_CbbOrigin").value == "-1") {

                var SelectOrigin = "Hay cho diem khoi hanh";
                alert(SelectOrigin);
                document.getElementById("ctl00_UcRightV31_CbbOrigin").focus();
                return false;
            }
            if (document.getElementById("ctl00_UcRightV31_CbbDepart").value == "-1") {
                var SelectDepartment = '请选择到达点!';
                alert(SelectDepartment);
                //alert("Hãy chọn điểm đến!");
                document.getElementById("ctl00_UcRightV31_CbbDepart").focus();
                return false;
            }


        }
        $(document).ready(function () {
            $('#selectOrigin').change(function () {
                $('.selectedValOrigin').val($("#selectOrigin").val());
                $('.selectedValDestination').val($("#selectDestination").val());
                $('#selectDestination').empty().append('<option value="">到达日</option>');
                var originCode = $('#selectOrigin').val();
                var jsonlist = objectAirport.Pair;
                $.each(jsonlist, function (_i, _value) {
                    var arrival = _value.ArrivalAirports.AirportList;
                    if (_value.DepartureAirport.Code == originCode) {
                        $.each(arrival, function (index) {
                            var optgroup = $('<optgroup>');
                            optgroup.attr('label', arrival[index].CountryName);
                            var count = 0;
                            $.each(arrival[index].List, function (i) {
                                var option = $("<option></option>");
                                option.val(arrival[index].List[i].Code);
                                option.text(arrival[index].List[i].Name + " (" + arrival[index].List[i].Code + ")");
                                optgroup.append(option);
                                count ++;
                            });
                            if (count != 0)
                                $("#selectDestination").append(optgroup);
                            $("#selectDestination").select2();
                        });
                    }

                });
            });
            $("#selectDestination").change(function () {
                $('.selectedValOrigin').val($("#selectOrigin").val());
                $('.selectedValDestination').val($("#selectDestination").val());
            });
        });
        $(function () {
            var dates = $("#ctl00_UcRightV31_TxtDepartDate, #ctl00_UcRightV31_TxtReturnDate").datepicker({
                defaultDate: "+1w",
                changeMonth: true,
                changeYear: false,
                numberOfMonths: 1,
                onSelect: function (selectedDate) {
                    var option = this.id == "ctl00_UcRightV31_TxtDepartDate" ? "minDate" : "maxDate",
                        instance = $(this).data("datepicker"),
                        date = $.datepicker.parseDate(
                            instance.settings.dateFormat ||
                            $.datepicker._defaults.dateFormat,
                            selectedDate, instance.settings);
                    dates.not(this).datepicker("option", option, date);
                }
            });
        });
        $('#selectOrigin').change(function () {
            $('.selectedValOrigin').val($("#selectOrigin").val());
            $('.selectedValDestination').val($("#selectDestination").val());
            $('#selectDestination').empty().append('<option value="">到达日</option>');
            var originCode = $('#selectOrigin').val();
            var jsonlist = objectAirport.Pair;
            $.each(jsonlist, function (_i, _value) {
                var arrival = _value.ArrivalAirports.AirportList;
                if (_value.DepartureAirport.Code == originCode) {
                    $.each(arrival, function (index) {
                        var optgroup = $('<optgroup>');
                        optgroup.attr('label', arrival[index].CountryName);
                        var count = 0;
                        $.each(arrival[index].List, function (i) {
                            var option = $("<option></option>");
                            option.val(arrival[index].List[i].Code);
                            option.text(arrival[index].List[i].Name + " (" + arrival[index].List[i].Code + ")");
                            optgroup.append(option);
                            count ++;
                        });
                        if (count != 0)
                            $("#selectDestination").append(optgroup);
                        $("#selectDestination").select2();
                    });
                }

            });
        });
        $("#selectDestination").change(function () {
            $('.selectedValOrigin').val($("#selectOrigin").val());
            $('.selectedValDestination').val($("#selectDestination").val());
        });
    </script>

</head>
<body>
    <form action="/check" method="post">
        <input id="RbOneWay" type="radio" name="trip" value="1">
        <label for="RbOneWay">单程</label>
        <input id="RbRoundTrip" type="radio" name="trip" value="2" checked>
        <label for="RbRoundTrip">返回</label>


        <label>
            <div class="content-flight">
                <div class="pad3">
                    <div class="line">
                        <img src="https://www.vietjetair.com/Resources/Images/Web/27102011/bg-search-line.png" class="img2">
                    </div>
                    <div class="in" data-select2-id="5">
                        <div class="in-left" data-select2-id="4">
                            <select name="lstOrigAP" id="lstOrigAP">
                                <option value="-1"></option>
                                <option value="HET">Baita</option>
                                <option value="BKK">BangKok - Suvarnabhumi</option>
                                <option value="BMV">Buon Ma Thuot</option>
                                <option value="PUS">Busan</option>
                                <option value="VCA">Can Tho</option>
                                <option value="CGQ">Changchun</option>
                                <option value="CSX">Changsha</option>
                                <option value="CZX">Changzhou</option>
                                <option value="CTU">Chengdu</option>
                                <option value="CJJ">Cheong Ju</option>
                                <option value="BOM">Chhatrapati Shivaji</option>
                                <option value="CNX">Chiang Mai</option>
                                <option value="CEI">Chiang Rai</option>
                                <option value="CKG">Chongqing</option>
                                <option value="VCL">Chu Lai</option>
                                <option value="DLI">Da Lat</option>
                                <option value="DAD">Da Nang</option>
                                <option value="TAE">Daegu</option>
                                <option value="DAT">Datong Yungang</option>
                                <option value="VDH">Dong Hoi</option>
                                <option value="DSN">Dongsheng</option>
                                <option value="FKS">Fukushima</option>
                                <option value="GAY">Gaya</option>
                                <option value="KWE">Guiyang</option>
                                <option value="HAN">Ha Noi</option>
                                <option value="HPH">Hai Phong</option>
                                <option value="HGH">Hangzhou</option>
                                <option value="HRB">Harbin Taiping International Airport</option>
                                <option value="INC">Hedong</option>
                                <option value="HFE">Hefei Xinqiao</option>
                                <option value="SGN">Ho Chi Minh</option>
                                <option value="HKG">Hong Kong - Terminal 2</option>
                                <option value="HIA">Huai an Lianshui</option>
                                <option value="HUI">Hue</option>
                                <option value="IBR">Ibaraki</option>
                                <option value="TNA">Jinan</option>
                                <option value="JJN">Jinjiang</option>
                                <option value="KHH">Kaohsiung</option>
                                <option value="KMQ">Komatsu</option>
                                <option value="KBV">Krabi</option>
                                <option value="KUL">Kuala Lumpur - KLIA</option>
                                <option value="KMG">Kunming</option>
                                <option value="LHW">Lanzhou Zhongchuan</option>
                                <option value="KWL">Liangjiang</option>
                                <option value="MFM">Macau</option>
                                <option value="HAK">Meilan</option>
                                <option value="MWX">Muan</option>
                                <option value="NGO">Nagoya</option>
                                <option value="KHN">Nanchang</option>
                                <option value="NKG">Nanjing Lukou</option>
                                <option value="NNG">Nanning</option>
                                <option value="DEL">New Delhi</option>
                                <option value="CTS">New Sapporo</option>
                                <option value="DPS">Ngurah Rai - Bali</option>
                                <option value="CXR">Nha Trang</option>
                                <option value="KIJ">Niigata</option>
                                <option value="NGB">Ningbo</option>
                                <option value="KIX">Osaka - Terminal 1</option>
                                <option value="PEN">Penang</option>
                                <option value="YNT">Penglai</option>
                                <option value="PNH">Phnom Penh</option>
                                <option value="PQC">Phu Quoc</option>
                                <option value="HKT">Phuket</option>
                                <option value="PXU">Pleiku</option>
                                <option value="TAO">Qingdao</option>
                                <option value="UIH">Quy Nhon</option>
                                <option value="SDJ">Sendai Airport</option>
                                <option value="ICN">Seoul</option>
                                <option value="PVG">Shanghai Pudong</option>
                                <option value="SJW">Shijiazhuang</option>
                                <option value="REP">Siem Reap</option>
                                <option value="SIN">Singapore - Terminal 4</option>
                                <option value="RMQ">Taichung</option>
                                <option value="TNN">Tainan</option>
                                <option value="TPE">Taipei - Terminal 1</option>
                                <option value="TYN">Taiyuan Wusu</option>
                                <option value="SHE">Taoxian</option>
                                <option value="THD">Thanh Hoa</option>
                                <option value="TSN">Tianjin</option>
                                <option value="NRT">Tokyo</option>
                                <option value="TBB">Tuy Hoa</option>
                                <option value="VDO">Van Don</option>
                                <option value="VII">Vinh</option>
                                <option value="WUH">Wuhan</option>
                                <option value="WUX">Wuxi</option>
                                <option value="XIY">Xian</option>
                                <option value="NTG">Xingdong</option>
                                <option value="CGO">Xinzheng</option>
                                <option value="ZYI">Xinzhou</option>
                                <option value="XUZ">Xuzhou Guanyin</option>
                                <option value="RGN">Yangon</option>
                                <option value="YNY">Yangyang</option>
                                <option value="YIH">Yichang</option>
                                <option value="YIW">Yiwu</option>
                                <option value="YGJ">Yonago</option>
                                <option value="UYN">Yulin Yuyang Airport</option>
                                <option value="DYG">Zhangjiajie Hehua</option>
                                <option value="DLC">Zhoushuizi</option>
                            </select>
                            <span class="select2 select2-container select2-container--default select2-container--above select2-container--focus" dir="ltr" data-select2-id="1" style="width: 226px;">
                              <span class="selection">
                                <span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-selectOrigin-container">
                                  <span class="select2-selection__rendered" id="select2-selectOrigin-container" role="textbox" aria-readonly="true" title="出发点">出发点</span>
                                  <span class="select2-selection__arrow" role="presentation">
                                    <b role="presentation"></b>
                                  </span>
                                </span>
                              </span>
                              <span class="dropdown-wrapper" aria-hidden="true"></span>
                            </span>
                            <select id="selectDestination" name="selectDestination" class="selectbox-destination">
                                <option value="">到达日</option>
                            </select>
                        </div>

                        <div class="in-right">
                            <div class="bg-text">
                                出发日期
                                <select name="txtDepartDateMonth">
                                    <option value="0">Jan</option>
                                    <option value="1">Feb</option>
                                    <option value="2">Mar</option>
                                    <option value="3">Apr</option>
                                    <option value="4">May</option>
                                    <option value="5">Jun</option>
                                    <option value="6" selected="selected">Jul</option>
                                    <option value="7">Aug</option>
                                    <option value="8">Sep</option>
                                    <option value="9">Oct</option>
                                    <option value="10">Nov</option>
                                    <option value="11">Dec</option></select>
                                <select name="txtDepartDateDay">
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                    <option value="3">3</option>
                                    <option value="4">4</option>
                                    <option value="5">5</option>
                                    <option value="6">6</option>
                                    <option value="7">7</option>
                                    <option value="8">8</option>
                                    <option value="1">9</option>
                                    <option value="10">10</option>
                                    <option value="11">11</option>
                                    <option value="12">12</option>
                                    <option value="13">13</option>
                                    <option value="14">14</option>
                                    <option value="15">15</option>
                                    <option value="16">16</option>
                                    <option value="17">17</option>
                                    <option value="18">18</option>
                                    <option value="19">19</option>
                                    <option value="20">20</option>
                                    <option value="21">21</option>
                                    <option value="22">22</option>
                                    <option value="23" selected="selected">23</option>
                                    <option value="24">24</option>
                                    <option value="25">25</option>
                                    <option value="26">26</option>
                                    <option value="27">27</option>
                                    <option value="28">28</option>
                                    <option value="29">29</option>
                                    <option value="30">30</option>
                                    <option value="31">31</option>
                                </select>
                            </div>
                            <!--bg-text-->
                        </div>
                    </div>
                    <!--in-->
                    <div class="in">
                        <!--in-left-->
                        <div class="in-right">
                            <div class="bg-text">
                                回来日期
                                <select name="txtReturnDateMonth">
                                    <option value="0">Jan</option>
                                    <option value="1">Feb</option>
                                    <option value="2">Mar</option>
                                    <option value="3">Apr</option>
                                    <option value="4">May</option>
                                    <option value="5">Jun</option>
                                    <option value="6" selected="selected">Jul</option>
                                    <option value="7">Aug</option>
                                    <option value="8">Sep</option>
                                    <option value="9">Oct</option>
                                    <option value="10">Nov</option>
                                    <option value="11">Dec</option></select>
                                <select name="txtReturnDateDay">
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                    <option value="3">3</option>
                                    <option value="4">4</option>
                                    <option value="5">5</option>
                                    <option value="6">6</option>
                                    <option value="7">7</option>
                                    <option value="8">8</option>
                                    <option value="1">9</option>
                                    <option value="10">10</option>
                                    <option value="11">11</option>
                                    <option value="12">12</option>
                                    <option value="13">13</option>
                                    <option value="14">14</option>
                                    <option value="15">15</option>
                                    <option value="16">16</option>
                                    <option value="17">17</option>
                                    <option value="18">18</option>
                                    <option value="19">19</option>
                                    <option value="20">20</option>
                                    <option value="21">21</option>
                                    <option value="22">22</option>
                                    <option value="23">23</option>
                                    <option value="24">24</option>
                                    <option value="25" selected="selected">25</option>
                                    <option value="26">26</option>
                                    <option value="27">27</option>
                                    <option value="28">28</option>
                                    <option value="29">29</option>
                                    <option value="30">30</option>
                                    <option value="31">31</option>
                                </select>
                            </div>
                        </div>
                        <!--in-right-->

                    </div>


                    <div class="text">
                        <div class="text-left">
                            <p class="price">货币种类</p>
                            <div id="ctl00_UcRightV31_CbbCurrency" class="AjaxToolkitStyle">
                                <table id="ctl00_UcRightV31_CbbCurrency_Table">
                                    <tbody><tr>
                                        <td><select name="currency" id="currency">
                                            <option value="USD">USD</option>
                                            <option value="VND">VND</option>
                                            <option value="THB">THB</option>
                                            <option value="SGD">SGD</option>
                                            <option value="TWD">TWD</option>
                                            <option value="KRW">KRW</option>
                                            <option value="MYR">MYR</option>
                                            <option value="HKD">HKD</option>
                                            <option value="CNY">CNY</option>
                                            <option value="JPY">JPY</option>
                                            <option value="INR">INR</option>
                                            <option value="KHR">KHR</option>
                                        </select></td>
                                    </tr>
                                    </tbody></table>
                            </div>
                        <input type="submit" name="ctl00$UcRightV31$BtSearch" value="查找航班" >
                        <!--text-left-->
                        <div class="text-right">
                            <div>
                                <div>
                                    <p>大人</p>
                                    <div>
                                        <table id="ctl00_UcRightV31_CbbAdults_Table">
                                            <tbody>
                                            <tr>
                                                <td><input type="text" id="ctl00_UcRightV31_CbbAdults_TextBox" name="adult" value="1"></td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                    <p>儿童</p>
                                    <div>
                                        <table id="ctl00_UcRightV31_CbbChildren_Table" class="ajax__combobox_inputcontainer" cellspacing="0" cellpadding="0" border="0" style="border-width:0px;border-style:None;border-collapse:collapse;display:inline-block;position:relative;top:5px;">
                                            <tbody>
                                            <tr>
                                                <td><input name="child" type="text" id="ctl00_UcRightV31_CbbChildren_TextBox" autocomplete="off" style="margin: 0px;" value="0"></td><td class="ajax__combobox_buttoncontainer"></td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                    <p>小孩</p>
                                    <div >
                                        <table >
                                            <tbody>
                                            <tr>
                                                <td ><input name="infants" type="text" value="0"></td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                            </div>

                        </div>
                        <!--text-right-->
                    </div>
                    <!--text-->
                        </div>
                </div>
            </div>
            </div>
        </label>
    </form>
</body>
</html>